<template>
  <!-- 公共书写评论 -->
  <div class="comment-write">
    <div class="title">
      <div>
        <span class="sp-1">评论</span>
        <span class="sp-2">共211773条评论</span>
      </div>
    </div>
    <!-- 书写评论区域 -->
    <div class="submit-word">
      <div class="headshot">
        <img src="./img/1.jpg" alt="用户头像" />
      </div>
      <div class="content">
        <div class="top">
          <textarea
            placeholder="评论"
            maxlength="140"
            @input="commentKeyup"
            @compositionstart="compositionstart"
            @compositionend="compositionend"
            v-model="commentWord"
          ></textarea>
          <div class="icon">
            <span class="true">◆</span>
            <span class="mask">◆</span>
          </div>
        </div>
        <div class="btm">
          <div class="btm-l">
            <i class="smile"></i>
            <i class="share"></i>
          </div>
          <div class="btm-r">
            <span class="number">还可输入{{ remainWord }}字</span>
            <span class="btn">评论</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论展示 -->
    <!-- 大家的评论展示 -->
    <div class="people">
      <div class="p-title">
        <span class="sp-1">精彩评论</span>
      </div>
      <ul class="p-content">
        <li v-for="(i, index) in 10" :key="index">
          <div class="p-img">
            <img src="./img/1.jpg" alt="用户头像" />
          </div>
          <div class="p-word">
            <div class="p-top">
              <a href="javascript:;">-_-老鱼</a>
              <span>
                ：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
              >
            </div>
            <div class="p-btm">
              <div class="p-left">2020年11月26日</div>
              <div class="p-right">
                <span><i class="icon"></i>(3021)</span>
                <span>|</span>
                <span>回复</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment-write",
  data() {
    return {
      // 评论区当前文字
      commentWord: "",
      // 剩余字数
      remainWord: 140,
      // 判断是否是中文输入的标识
      isChineseInput: false,
      // 分页器当前页数
    };
  },
  methods: {
    // 评论框输入
    commentKeyup($event) {
      console.log(this.commentWord, "keyup");
      var chineseNum = 0,
        englishNum = 0;
      // 注意如果没有匹配成功返回null，空串进行匹配也会返回null
      var chinese = this.commentWord.match(/[^\x00-\x80]/g);
      var notChinese = this.commentWord.match(/[\x00-\x80]/g);
      // 匹配中文,当存在中文的时候获取中文的长度
      if (chinese !== null) {
        chineseNum = chinese.length;
      }
      // 匹配英文和数字等（前128位常见字符）,两个字符算一个汉字
      if (notChinese !== null) {
        englishNum = Math.ceil(notChinese.length / 2);
      }
      this.remainWord = 140 - chineseNum - englishNum;
    },
    // 控制中文输入
    compositionstart() {
      console.log(this.commentWord, "start");
      // 开始中文输入
      this.isChineseInput = true;
    },
    // 控制中文输入
    compositionend() {
      console.log(this.commentWord, "end");
      if (this.isChineseInput) {
        this.isChineseInput = !this.isChineseInput;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-write {
  .title {
    width: 100%;
    border-bottom: 2px solid #c20c0c;
    line-height: 35px;
    height: 35px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .sp-1 {
      font-size: 20px;
      color: #333;
      margin-left: 35px;
    }
    .sp-2 {
      font-size: 12px;
      color: #666;
      margin-left: 20px;
    }
  }
  .submit-word {
    margin: 15px 0;
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    .headshot {
      width: 50px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .content {
      width: 615px;
      textarea {
        width: 100%;
        border: 1px solid #cdcdcd;
        height: 60px;
        padding: 5px 6px 6px;
        box-sizing: border-box;
        resize: none;
        outline: none;
        font-size: 12px;
        color: #666;
      }
      .top {
        margin-left: 10px;
        position: relative;
        .icon {
          font-size: 30px;
          position: absolute;
          top: 10px;
          left: -9px;
          .true {
            color: #cdcdcd;
          }
          .mask {
            margin-left: -17px;
            color: #fff;
          }
        }
      }
      .btm {
        .btm-l {
          float: left;
          height: 25px;
          padding: 10px;
          .smile,
          .share {
            width: 18px;
            height: 18px;
            display: inline-block;
            background: url("@/assets/icon.png") no-repeat;
            cursor: pointer;
          }
          .smile {
            background-position: -40px -490px;
            margin-right: 8px;
          }
          .share {
            background-position: -60px -490px;
          }
        }
        .btm-r {
          float: right;
          height: 25px;
          padding-top: 10px;
          .number {
            font-size: 12px;
            color: #999;
          }
          .btn {
            display: inline-block;
            width: 46px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            margin-left: 10px;
            background: url("@/assets/button.png") no-repeat;
            background-position: -84px -64px;
            &:hover {
              background-position: -84px -94px;
            }
          }
        }
      }
    }
  }
  .people {
    .p-title {
      width: 100%;
      border-bottom: 2px dotted #c20c0c;
      line-height: 24px;
      height: 24px;
      .sp-1 {
        font-size: 12px;
        color: #333;
        font-weight: bold;
      }
    }
    .p-content {
      font-size: 12px;
      width: 100%;
      li {
        width: 100%;
        height: 66px;
        padding: 15px 0;
        display: flex;
        border-bottom: 1px dotted #ccc;
        .p-img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
          &:hover {
            cursor: pointer;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .p-word {
          width: 598px;
          .p-top {
            color: #333;
            height: 40px;
            line-height: 20px;
            a {
              color: #c20c0c;
              &:hover {
                text-decoration: underline;
              }
            }
          }
          .p-btm {
            line-height: 16px;
            margin-top: 10px;
            .p-left {
              float: left;
              color: #999;
            }
            .p-right {
              float: right;
              span:nth-child(1) {
                color: #333;
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }
                i {
                  display: inline-block;
                  width: 15px;
                  height: 16px;
                  vertical-align: middle;
                  margin-right: 8px;
                  background: url("@/assets/icon2.png") no-repeat;
                  background-position: -150px 0px;
                  &:hover {
                    background-position: -170px 0;
                  }
                }
              }
              span:nth-child(2) {
                color: #ccc;
                margin: 0 5px;
              }
              span:nth-child(3) {
                color: #666;
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>